/* 右侧结构是纯表格的情况--上下结构
命名为top and bottom -- tb-xxx
右侧是tree + 表格的情况--左右结构
命名为left and right -- lr-xxx
 */

/* 使用icon、button需要外面套用class为对应样式的div
例如：
    <div class="common-top-icon">
        <Icon type="checkmark"></Icon>
    </div>
 */

.clean {
    clear: both;
}

.font-bord {
    font-weight: bold;
}

/* color */

.color-primary {
    color: #3399ff; /* 蓝色 */
}

.color-light-primary {
    color: #5cadff; /* 浅蓝 */
}

.color-dark-primary {
    color: #3091f2; /* 深蓝 */
}

.color-info {
    color: #3399ff; /* 蓝色 */
}

.color-success {
    color: #00cc66; /* 绿色 */
}

.color-warning {
    color: #ff9900; /* 橘黄色 */
}

.color-error {
    color: #ff6600; /* 橘红色 */
}

.color-title {
    color: #464c5b; /* 深黑色 */
}

.color-content {
    color: #657180; /* 浅黑色 */
}

.color-sub {
    color: #9ea7b4; /* 深灰黑 */
}

.color-disabled {
    color: #c3cbd6; /* 浅灰黑 */
}

.color-border {
    color: #d7dde4; /* 深灰 */
}

.color-divider {
    color: #e3e8ee; /* 浅灰 */
}

.color-background {
    color: #e3e8ee; /* 灰白 */
}

/* common-xxx */

.common-right {
    float: right;
}

.common-left {
    float: left;
}

.common-top-container {
    height: 40px;
    border-bottom: 1px solid #ddd;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 40px;
    font-size: 14px;
}

.common-top-ver-line {
    border-right: 2px solid;
    width: 1px;
    height: 13px;
    float: left;
    margin-right: 10px;
    margin-top: 13px;
    color: #3399ff;
}

.common-top-title-left {
    display: block;
    float: left;
    margin-right: 10px;
    color: #3399ff;
}

.common-top-title-right {
    display: block;
    float: right;
    color: #3399ff;
}

.common-top-icon {
    margin-right: 10px;
    color: #3399ff;
    float: left;
    line-height: 40px;
}

.common-top-right {
    float: right;
    line-height: 40px;
}

.common-right-btn {
    margin-left: 8px;
}

.common-left-btn {
    margin-right: 8px;
}

.common-long-size {
    width: 300px;
}

.common-default-size {
    width: 200px;
}

.common-short-size {
    width: 120px;
}

.common-top-margin-20 {
    margin-top: 20px;
}

.common-left-margin-8 {
    margin-left: 8px;
}

.z-table-controller-checkbox {
    padding: 0 0 0 19px;
}

.z-form .z-form-controller {
    width: 260px;
}

/* tb-xxx */

.tb-container {
    margin-top: 16px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 56px;

}

.z-table-container {
    margin-top: 16px;
}

.z-flip-container {
    border: 1px solid #ddd;
    border-top: none;
    height: 40px;
    line-height: 40px;
}

.z-flip-container .z-flip-page {
    float: right;
    line-height: 26px;
    margin-top: 8px;
}

.z-flip-container .z-flip-text {
    height: 40px;
    margin-right: 16px;
    float: right;
    display: block;
}

/* lr-xxx */

.lr-left-container {
    float: left;
    width: 218px;
    height: 780px;
    border: 1px solid #ddd;
    margin-left: 20px;
    margin-top: 14px;
}

.lr-left-title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    font-weight: bold;
}

.lr-right-container {
    margin-left: 258px;
    margin-right: 20px;
    margin-bottom: 56px;
}

.lr-right-top {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
}

.lr-right-top-left {
    float: left;
    height: 40px;
    line-height: 40px;
}

.lr-right-top-right {
    float: right;
    height: 40px;
    line-height: 40px;
}

.lr-right-middle {
    margin-top: 14px;
}

.lr-import-steps-container {
    height: 100px;
    border-bottom: 1px solid #ddd;
    line-height: 100px;
    padding-left: 15%;
    padding-top: 25px;
}

.lr-import-steps {
    float: left;
}
